<template>
  <div class="smashEggs">
    <div class="mark" v-if="showRule || showResult"></div>
    <button @click="back">返回</button>
    <header>
      <div class="title">{{ activityTitle }}</div>
      <div class="tip">
        <span>{{ tip }}</span>
      </div>
      <div class="move-text">
        <transition class="inner-container" name="slide" mode="out-in">
          <p class="item-text" :key="moveItem.id">{{ moveItem.val }}</p>
        </transition>
      </div>
      <button class="activity-rule" @click="showRuleBtn">活动规则</button>
    </header>
    <main>
      <div class="main-img">
        <img
          v-for="(item, index) in 3"
          :key="index"
          src="https://gitee.com/li-xianjie/pic-go/raw/master/img/lALPD4d8tp1F8TLMyng_120_202.png"
          alt="金蛋"
          :class="index == 1 ? 'middle' : ''"
          @click="smashEggs(index)"
        />
        <img
          v-if="showEgg"
          class="egg-live"
          src="https://gitee.com/li-xianjie/pic-go/raw/master/img/20210820111423.png"
          alt="砸蛋动画"
        />
      </div>
      <div class="main-text">
        <div v-if="status == 0">
          <div class="main-text-title">即将开启....</div>
          <div class="main-text-tip">
            <span>剩余：</span><count-down :time="time"></count-down>
          </div>
        </div>
        <div v-if="status == 1">
          <div class="main-text-title">今天还有3次砸金蛋机会</div>
          <div class="main-text-tip">已有123456人参与</div>
        </div>
        <div v-if="status == -1">
          <div class="main-text-title">活动已结束</div>
          <div class="main-text-tip">已有123456人参与</div>
        </div>
      </div>
      <div class="main-foot">
        <button @click="lookPrize">我的奖品</button>
        <button @click="sharePrize">分享好友</button>
      </div>
    </main>
    <div v-if="showRule" class="popup-rule">
      <span class="close-popup-rule" @click="closePopupRule">x</span>
      <div class="popup-rule-main">
        <div class="popup-rule-title">活动规则</div>
        <div class="popup-rule-text">
          <ol>
            <li>活动时间：{{ rule.time }}</li>
            <li>
              活动规则：<br /><span class="rule">{{ rule.rule }}</span>
            </li>
            <li>
              奖品发放说明：
              <ul class="explain-list">
                <li v-for="explainItem in rule.explain" :key="explainItem">
                  {{ explainItem }}
                </li>
              </ul>
            </li>
            <li>所有奖品抽完为止</li>
          </ol>
        </div>
      </div>
    </div>
    <div class="result" v-if="showResult">
      <span class="close-popup-result" @click="closeResultBtn">x</span>
      <div class="popup-result-main">
        <div class="title">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon--liwu"></use>
          </svg>
        </div>
        <p>中奖啦~恭喜抽中10元花费</p>
        <p>分享活动给好友，即可获得更多抽奖机会</p>
        <div class="foot">
          <button @click="sharePrize">立即分享</button>
          <button @click="lookPrize">查看奖品</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countDown from "@/components/countDown.vue";
export default {
  name: "smashEggs",
  components: {
    countDown,
  },
  data() {
    return {
      activityTitle: "618狂欢月金蛋送好礼",
      tip: "会员免费领，砸出6折优惠",
      moveList: ["恭喜张三1中奖", "恭喜张三2中奖", "恭喜张三3中奖"], //中奖信息
      number: 0,
      rule: {
        time: "5月21日-6月30日",
        rule: " 每人每日自动获得3次砸金蛋机会。将活动分享给微信好友或微信群额外增加1次抽奖，最多可分享1次。当天完成抽奖，过期机会作废。",
        explain: [
          "优惠券仅限活动商品使用；",
          "优惠券有效期为自获得之日起30日内有效，过期无效；",
          "优惠内容不可与其他优惠叠加使用，不兑现、不找零，优惠金额部分不支持开具发票；",
          " 优惠仅支持线上支付使用，如遇使用问题，请联系客服。",
        ],
      },
      showRule: false, //展示规则弹窗
      showEgg: false,
      showResult: false,
      status: null,
      startTime: new Date("2021-9-1"),
      stopTime: new Date("2021-10-2"),
      time: "",
      currentTime: new Date(), //当前时间
    };
  },
  computed: {
    moveItem() {
      return {
        id: this.number,
        val: this.moveList[this.number],
      };
    },
  },
  mounted() {
    this.startMove(); //文字滚动
    this.isStart();
  },
  methods: {
    // 根据时间差判断活动状态
    isStart() {
      this.time = this.startTime - this.currentTime;
      if (this.currentTime < this.startTime) {
        this.status = 0; //未开始
      } else if (
        this.currentTime >= this.startTime &&
        this.currentTime <= this.stopTime
      ) {
        this.status = 1; //进行中
      } else if (this.currentTime > this.stopTime) {
        this.status = -1; //已结束
      }
      // this.status = -1;
      this.startTime = this.$moment(this.startTime).format("M月D日");
      this.stopTime = this.$moment(this.stopTime).format("M月D日");
    },
    //返回活动页
    back() {
      this.$router.push("/activity");
    },
    //文字滚动
    startMove() {
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000);
      this.$once(() => {
        clearTimeout(timer);
        timer = null;
      });
    },
    // 展示活动规则
    showRuleBtn() {
      this.showRule = true;
    },
    // 关闭活动规则
    closePopupRule() {
      this.showRule = false;
    },
    //查看奖品
    lookPrize() {
      console.log("查看奖品");
    },
    // 分享好友
    sharePrize() {
      console.log("分享好友");
    },
    //砸蛋
    smashEggs(val) {
      console.log(val);
      this.showEgg = true;
      setTimeout(() => {
        this.showEgg = false;
      }, 1100);
      setTimeout(() => {
        this.showResult = true;
      }, 1400);
    },
    closeResultBtn() {
      this.showResult = false;
    },
  },
};
</script>
<style lang="less" scoped>
.smashEggs {
  height: 100vh;
  button {
    border: none;
    background: none;
  }
  header {
    text-align: center;
    .title {
      font-size: 1.25rem;
      font-weight: bolder;
      padding: 1.25rem;
    }
    .tip {
      font-size: 0.875rem;
    }
    .move-text {
      margin: 1.25rem 2.375rem 0.625rem;
      border-radius: 1.25rem;
      background: rgb(236, 235, 235);
      font-size: 0.8125rem;
      overflow: hidden;
      .item-text {
        padding: 10px;
        overflow: hidden;
      }
      .slide-enter-active,
      .slide-leave-active {
        transition: all 0.5s linear;
      }
      .slide-leave-to {
        transform: translateY(-20px);
      }
      .slide-enter {
        transform: translateY(20px);
      }
    }
    .activity-rule {
      border: none;
      background: rgb(236, 235, 235);
      font-size: 0.875rem;
      padding: 0.1875rem 0.5rem;
      border-radius: 0.9375rem;
      position: absolute;
      right: 1.25rem;
      top: 30%;
    }
  }
  main {
    margin-top: 6.5625rem;
    text-align: center;
    .main-img {
      display: flex;
      justify-content: center;
      img {
        width: 115px;
        height: 190px;
      }
      img:hover {
        cursor: url("https://gitee.com/li-xianjie/pic-go/raw/master/img/lALPD4d8tp1EzTw9SQ_73_61.png"),
          default;
      }
      .middle {
        width: 125px;
        position: relative;
        top: -25px;
      }
      .egg-live {
        width: 70%;
        height: 50%;
        position: absolute;
        top: 20%;
        animation-name: egg-animation;
        animation-duration: 1s;
      }
      @keyframes egg-animation {
        from {
          transform: scale(0, 0);
        }
        to {
          transform: scale(1, 1);
        }
      }
    }
    .main-text {
      .main-text-title {
        font-size: 18px;
        font-weight: bolder;
      }
      .main-text-tip {
        margin: 10px 0;
        font-size: 17px;
        color: #ccc;
      }
    }
    .main-foot {
      margin: 40px 0;
      button {
        padding: 10px 25px;
        background: rgb(236, 235, 235);
        margin: 0 20px;
        border-radius: 8px;
      }
    }
  }
  .popup-rule {
    position: absolute;
    top: 18%;
    right: 0;
    left: 0;
    margin: auto;
    width: 18.75rem;
    height: 27.5rem;
    border-radius: 0.625rem;
    background: #fff;
    overflow: auto;
    z-index: 2;
    .close-popup-rule {
      position: relative;
      left: 92%;
      top: 0.3125rem;
      display: inline-block;
      width: 0.9375rem;
      height: 0.9375rem;
      line-height: 0.9375rem;
      text-align: center;
      border-radius: 50%;
      border: 0.1px solid #000;
      font-size: 0.75rem;
    }
    .popup-rule-main {
      padding: 10px;
      .popup-rule-title {
        text-align: center;
        font-weight: bolder;
        margin: 0.625rem 0;
      }
      .popup-rule-text {
        font-size: 0.75rem;
        padding-left: 1.875rem;
        padding-top: 0.625rem;
        ol {
          li {
            margin: 0.625rem 0;
          }
          .rule {
            display: inline-block;
            text-indent: 0.75rem;
          }
          .explain-list {
            padding-left: 1.25rem;
            li {
              margin: 0.125rem 0;
            }
          }
        }
      }
    }
  }
  .result {
    width: 300px;
    height: 250px;
    position: absolute;
    top: 23%;
    left: 0;
    right: 0;
    margin: auto;
    background: #fff;
    border-radius: 10px;
    z-index: 2;
    .close-popup-result {
      position: relative;
      left: 92%;
      top: 0.3125rem;
      display: inline-block;
      width: 0.9375rem;
      height: 0.9375rem;
      line-height: 0.9375rem;
      text-align: center;
      border-radius: 50%;
      border: 0.1px solid #000;
      font-size: 0.75rem;
    }
    .popup-result-main {
      padding: 0 20px;
      text-align: center;
      .title {
        font-size: 45px;
      }
      p {
        margin: 10px 0;
      }
      p:nth-child(3) {
        color: #ccc;
        font-size: 15px;
      }
      button {
        margin: 10px 15px;
        padding: 10px 20px;
        border-radius: 5px;
        border: none;
        color: #fff;
      }
      button:nth-child(1) {
        background: #6495ed;
      }
      button:nth-child(2) {
        background: #ff6347;
      }
    }
  }
  // 遮盖
  .mark {
    background: rgba(0, 0, 0, 0.5) !important;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }
}
</style>